<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人博客</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --text-color: #333;
            --light-gray: #f5f5f5;
            --white: #ffffff;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: #f9f9f9;
        }

        .container {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* 头部样式 */
        header {
            background-color: var(--secondary-color);
            color: var(--white);
            padding: 20px 0;
            box-shadow: var(--shadow);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
        }

        .logo a {
            color: var(--white);
            text-decoration: none;
        }

        nav ul {
            display: flex;
            list-style: none;
        }

        nav ul li {
            margin-left: 20px;
        }

        nav ul li a {
            color: var(--white);
            text-decoration: none;
            transition: color 0.3s;
        }

        nav ul li a:hover {
            color: var(--primary-color);
        }

        /* 主要内容区 */
        main {
            flex: 2;
            padding: 30px 20px;
        }

        /* 文章卡片 */
        .article-card {
            background-color: var(--white);
            border-radius: 5px;
            box-shadow: var(--shadow);
            margin-bottom: 30px;
            overflow: hidden;
        }

        .article-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .article-content {
            padding: 20px;
        }

        .article-title {
            font-size: 22px;
            margin-bottom: 10px;
        }

        .article-title a {
            color: var(--secondary-color);
            text-decoration: none;
            transition: color 0.3s;
        }

        .article-title a:hover {
            color: var(--primary-color);
        }

        .article-meta {
            display: flex;
            margin-bottom: 15px;
            color: #7f8c8d;
            font-size: 14px;
        }

        .article-meta span {
            margin-right: 15px;
        }

        .article-excerpt {
            margin-bottom: 15px;
            color: #555;
        }

        .read-more {
            display: inline-block;
            color: var(--primary-color);
            text-decoration: none;
            font-weight: bold;
        }

        /* 侧边栏 */
        aside {
            flex: 1;
            padding: 30px 20px;
        }

        .sidebar-widget {
            background-color: var(--white);
            border-radius: 5px;
            box-shadow: var(--shadow);
            padding: 20px;
            margin-bottom: 30px;
        }

        .widget-title {
            font-size: 18px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            color: var(--secondary-color);
        }

        /* 关于我 */
        .about-me {
            text-align: center;
        }

        .profile-image {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 15px;
            border: 3px solid var(--primary-color);
        }

        /* 分类列表 */
        .category-list {
            list-style: none;
        }

        .category-list li {
            margin-bottom: 10px;
        }

        .category-list a {
            color: var(--text-color);
            text-decoration: none;
            transition: color 0.3s;
        }

        .category-list a:hover {
            color: var(--primary-color);
        }

        /* 标签云 */
        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .tag-cloud a {
            display: inline-block;
            padding: 5px 10px;
            background-color: var(--light-gray);
            color: var(--text-color);
            border-radius: 3px;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s;
        }

        .tag-cloud a:hover {
            background-color: var(--primary-color);
            color: var(--white);
        }

        /* 页脚 */
        footer {
            background-color: var(--secondary-color);
            color: var(--white);
            text-align: center;
            padding: 20px 0;
            margin-top: 30px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }

            nav ul {
                margin-top: 15px;
                justify-content: center;
            }

            nav ul li {
                margin: 0 10px;
            }
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="container header-content">
            <div class="logo">
                <a href="index.html">我的博客</a>
            </div>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="about.html">关于我</a></li>
                    <li><a href="categories.html">分类</a></li>
                    <li><a href="contact.html">联系</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主要内容区 -->
    <div class="container">
        <main>
            <!-- 文章列表 -->
            <article class="article-card">
                <img src="https://via.placeholder.com/800x400" alt="文章图片" class="article-image">
                <div class="article-content">
                    <h2 class="article-title"><a href="post.html">如何学习前端开发</a></h2>
                    <div class="article-meta">
                        <span><i class="far fa-calendar-alt"></i> 2023年5月15日</span>
                        <span><i class="far fa-folder"></i> <a href="#">前端开发</a></span>
                        <span><i class="far fa-comments"></i> 12条评论</span>
                    </div>
                    <p class="article-excerpt">
                        在这篇文章中，我将分享我学习前端开发的经验和心得，包括HTML、CSS和JavaScript的学习路径，以及一些实用的学习资源和技巧...
                    </p>
                    <a href="post.html" class="read-more">阅读更多 →</a>
                </div>
            </article>

            <article class="article-card">
                <img src="https://via.placeholder.com/800x400" alt="文章图片" class="article-image">
                <div class="article-content">
                    <h2 class="article-title"><a href="post.html">响应式设计的最佳实践</a></h2>
                    <div class="article-meta">
                        <span><i class="far fa-calendar-alt"></i> 2023年4月28日</span>
                        <span><i class="far fa-folder"></i> <a href="#">网页设计</a></span>
                        <span><i class="far fa-comments"></i> 8条评论</span>
                    </div>
                    <p class="article-excerpt">
                        响应式设计已成为现代网页设计的标准。本文将介绍一些响应式设计的最佳实践，包括媒体查询的使用、弹性布局和图片优化等技术...
                    </p>
                    <a href="post.html" class="read-more">阅读更多 →</a>
                </div>
            </article>

            <article class="article-card">
                <div class="article-content">
                    <h2 class="article-title"><a href="post.html">JavaScript ES6新特性详解</a></h2>
                    <div class="article-meta">
                        <span><i class="far fa-calendar-alt"></i> 2023年4月15日</span>
                        <span><i class="far fa-folder"></i> <a href="#">JavaScript</a></span>
                        <span><i class="far fa-comments"></i> 15条评论</span>
                    </div>
                    <p class="article-excerpt">
                        ES6为JavaScript带来了许多令人兴奋的新特性。本文将详细介绍let和const、箭头函数、模板字符串、解构赋值等ES6新特性及其使用场景...
                    </p>
                    <a href="post.html" class="read-more">阅读更多 →</a>
                </div>
            </article>

            <!-- 分页 -->
            <div class="pagination">
                <a href="#" class="active">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">下一页 →</a>
            </div>
        </main>

        <!-- 侧边栏 -->
        <aside>
            <!-- 关于我 -->
            <div class="sidebar-widget about-me">
                <h3 class="widget-title">关于我</h3>
                <img src="https://via.placeholder.com/150" alt="我的头像" class="profile-image">
                <p>我是前端开发者，热爱分享技术知识和经验。这个博客记录我的学习历程和技术思考。</p>
            </div>

            <!-- 分类 -->
            <div class="sidebar-widget">
                <h3 class="widget-title">分类</h3>
                <ul class="category-list">
                    <li><a href="#">前端开发 (12)</a></li>
                    <li><a href="#">JavaScript (8)</a></li>
                    <li><a href="#">网页设计 (5)</a></li>
                    <li><a href="#">后端技术 (3)</a></li>
                    <li><a href="#">生活随笔 (7)</a></li>
                </ul>
            </div>

            <!-- 标签云 -->
            <div class="sidebar-widget">
                <h3 class="widget-title">标签云</h3>
                <div class="tag-cloud">
                    <a href="#">HTML</a>
                    <a href="#">CSS</a>
                    <a href="#">JavaScript</a>
                    <a href="#">Vue</a>
                    <a href="#">React</a>
                    <a href="#">Node.js</a>
                    <a href="#">设计</a>
                    <a href="#">响应式</a>
                    <a href="#">ES6</a>
                    <a href="#">TypeScript</a>
                </div>
            </div>

            <!-- 最新文章 -->
            <div class="sidebar-widget">
                <h3 class="widget-title">最新文章</h3>
                <ul class="category-list">
                    <li><a href="#">如何学习前端开发</a></li>
                    <li><a href="#">响应式设计的最佳实践</a></li>
                    <li><a href="#">JavaScript ES6新特性详解</a></li>
                    <li><a href="#">Vue 3组合式API入门</a></li>
                    <li><a href="#">CSS Grid布局完全指南</a></li>
                </ul>
            </div>
        </aside>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>© 2023 我的个人博客. 保留所有权利.</p>
            <div class="social-links">
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-github"></i></a>
                <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
        </div>
    </footer>

    <!-- Font Awesome 图标库 -->
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</body>
</html>